<template>
    <div>
        <van-nav-bar title="查看分类" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="box">
            <van-sidebar v-model="active" @change="onChange">
                <van-sidebar-item v-for="item  in classList" :title="item" />
            </van-sidebar>
            <div class="child">
                <div>热门品牌</div>
                <template v-for="item in subBrand">
                    <van-tag type="primary" size="large">
                        {{ item.brand }}
                    </van-tag>
                    <br>
                </template>

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia'
import { useClass } from '../stores/class'
const store = useClass()
const active = ref(0);
const { classList, subBrand, resClass } = storeToRefs(store)
const onClickLeft = () => history.back();

onMounted(async () => {
    // 获取分类
    await store.feachProCategorylist()
    // 创建的时候也发
    
    await store.feachproCategorybrandlist(resClass.value)
    // 记录退出的位置
    active.value = resClass.value
})
const onChange = async (index: number) => {
    // 获取分类下面的所有品牌
    await store.feachproCategorybrandlist(index)

}

</script>

<style scoped lang="scss">
.box {
    position: absolute;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
    padding-top: 1.26666rem;
    padding-bottom: 1.33333rem;

    display: flex;

    .child {
        width: 100vw - 21.333vw;
        .van-tag{
            margin-bottom: 10px;
        }
    }
}
</style>